<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4003513" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">翻译</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe880;</span>
                <div class="name">yuque</div>
                <div class="code-name">&amp;#xe880;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">github</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">gitee-fill-round</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab5;</span>
                <div class="name">语雀</div>
                <div class="code-name">&amp;#xeab5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d0;</span>
                <div class="name">教育</div>
                <div class="code-name">&amp;#xe7d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">服务器</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">服务器网络</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">服务器-全部</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">服务器-网络更变</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">大括号</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">浏览器</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">鼠标</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c0;</span>
                <div class="name">volume静音</div>
                <div class="code-name">&amp;#xe7c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c1;</span>
                <div class="name">zap</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c2;</span>
                <div class="name">volume音量小</div>
                <div class="code-name">&amp;#xe7c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c3;</span>
                <div class="name">wifioff无线网</div>
                <div class="code-name">&amp;#xe7c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c4;</span>
                <div class="name">trendingdown趋势</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c5;</span>
                <div class="name">videooff视频关闭</div>
                <div class="code-name">&amp;#xe7c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c6;</span>
                <div class="name">wifi无线网</div>
                <div class="code-name">&amp;#xe7c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c7;</span>
                <div class="name">volume音量</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c8;</span>
                <div class="name">zapoff</div>
                <div class="code-name">&amp;#xe7c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c9;</span>
                <div class="name">volume音量大</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ca;</span>
                <div class="name">zoomin放大</div>
                <div class="code-name">&amp;#xe7ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cb;</span>
                <div class="name">xsquare叉</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cc;</span>
                <div class="name">wind风</div>
                <div class="code-name">&amp;#xe7cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">alert_a报警a</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cd;</span>
                <div class="name">usercheck用户核对</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">anchor锚</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ce;</span>
                <div class="name">check勾</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cf;</span>
                <div class="name">alert_b报警b</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cf;</span>
                <div class="name">icon_24_侧边收起</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d0;</span>
                <div class="name">airplay投屏</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d1;</span>
                <div class="name">alert_c报警c</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">aperture光圈</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">arrowdowncircle下圆箭头</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d4;</span>
                <div class="name">archive档案</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">activity活动</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">arrowdown下箭头</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
                <div class="name">arrowupright上右箭头</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">arrowup上箭头</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">arrowright右箭头</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">arrowupleft上左箭头</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
                <div class="name">arrowrightcircle右圆箭头</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
                <div class="name">arrowleft左箭头</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">atsign</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">arrowupcircle上圆箭头</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
                <div class="name">barchart导航a</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">barchart导航b</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e1;</span>
                <div class="name">arrowleftcircle左圆箭头</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
                <div class="name">battery电池</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">batterycharging充电</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
                <div class="name">belloff报警关闭</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e5;</span>
                <div class="name">book书</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">bell警报</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">award奖章</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">bluetooth蓝牙</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">box盒子</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">bookopen书</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">bookmark书签</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ec;</span>
                <div class="name">cast投射</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">camera相机</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">calendar日历</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">cameraoff相机关闭</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">chevronleft左箭头</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
                <div class="name">chevrondown下箭头</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">checkcircle圆勾</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">chevronright右箭头</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">chevronsdown双下箭头</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">checksquare方勾</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">briefcase公文包</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">clipboard写字板</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
                <div class="name">chrome游览器</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">chevronup上箭头</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">chevronsright双右箭头</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">chevronsup双上箭头</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">cloudlightning闪电</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">clock时钟</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">cloud云</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">cloudrain大雨</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
                <div class="name">clouddrizzle小雨</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">code编码</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">chevronsleft双左箭头</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">cloudsnow小雪</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe704;</span>
                <div class="name">cloudoff天气关闭</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe705;</span>
                <div class="name">codepen</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
                <div class="name">mappin地图2</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">gitpullrequest需求</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">eye眼睛</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">morehorizontal更多</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70a;</span>
                <div class="name">headphones耳机</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
                <div class="name">lifebuoy救生圈</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
                <div class="name">droplet水滴</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
                <div class="name">link链接</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70e;</span>
                <div class="name">download下载</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">filter过滤</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
                <div class="name">layout布局</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe711;</span>
                <div class="name">dollarsign钱</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe712;</span>
                <div class="name">cornerleftup箭头</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">gitcommit分之2</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">compass指南针</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">gitbranch分支</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">micoff话筒关</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">codesandbox</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">messagecircle消息1</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">edit编辑</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">copy复制</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71b;</span>
                <div class="name">cornerrightup箭头</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">coffee咖啡</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">gitmerge合并融合</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">cornerupleft箭头</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">morevertical更多</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">logout注销</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe721;</span>
                <div class="name">home主页</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe722;</span>
                <div class="name">command指令</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">phone电话</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">percent百分比</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe725;</span>
                <div class="name">harddrive硬盘</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe726;</span>
                <div class="name">move移动</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe727;</span>
                <div class="name">dribbble追波篮球</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe728;</span>
                <div class="name">monitor显示器</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">cornerupright箭头</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72a;</span>
                <div class="name">music音乐</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72b;</span>
                <div class="name">lock锁</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72c;</span>
                <div class="name">delete删除</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">minimize窗口化</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72e;</span>
                <div class="name">hash井号</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">folderplus展开文件夹</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">dividecircle除</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe731;</span>
                <div class="name">columns专栏</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe732;</span>
                <div class="name">file空文本</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe733;</span>
                <div class="name">cornerdownright箭头</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe734;</span>
                <div class="name">divide除</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe735;</span>
                <div class="name">heart心</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
                <div class="name">cornerleftdown箭头</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">folderminus收起文件夹</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe738;</span>
                <div class="name">filetext文本</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe739;</span>
                <div class="name">folder文件夹</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73a;</span>
                <div class="name">playcircle播放</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">edit2编辑2</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">globe地球</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">map地图</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73e;</span>
                <div class="name">list列表</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73f;</span>
                <div class="name">facebook</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe740;</span>
                <div class="name">gift礼物</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">messagesquare消息2</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">power电源关闭</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">plussquare方加号</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">mail邮件</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe745;</span>
                <div class="name">pausecircle暂停</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe746;</span>
                <div class="name">pocket口袋</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe747;</span>
                <div class="name">play播放</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe748;</span>
                <div class="name">phoneoutgoing拨打</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe749;</span>
                <div class="name">crop裁切</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74a;</span>
                <div class="name">phoneforwarded拨打</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">fastforward快进</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74c;</span>
                <div class="name">mic话筒</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">helpcircle帮助</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74e;</span>
                <div class="name">cornerrightdown箭头</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">fileplus加文件</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe750;</span>
                <div class="name">pause暂停</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe751;</span>
                <div class="name">link2链接2</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe752;</span>
                <div class="name">maximize最大化</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe753;</span>
                <div class="name">moon月亮</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe754;</span>
                <div class="name">package包裹</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe755;</span>
                <div class="name">minussquare减</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe756;</span>
                <div class="name">instagram相机</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe757;</span>
                <div class="name">login登陆</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe758;</span>
                <div class="name">paperclip回形针</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe759;</span>
                <div class="name">minuscircle减</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75a;</span>
                <div class="name">nav_c导航c</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75b;</span>
                <div class="name">phoneincoming接听</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75c;</span>
                <div class="name">phonecall电话拨打</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75d;</span>
                <div class="name">printer打印机</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75e;</span>
                <div class="name">radio广播</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75f;</span>
                <div class="name">creditcard信用卡</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe760;</span>
                <div class="name">edit3编辑3</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe761;</span>
                <div class="name">pluscircle圆加号</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe762;</span>
                <div class="name">inbox收件箱</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe763;</span>
                <div class="name">nav_b导航b</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe764;</span>
                <div class="name">crosshair瞄准</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe765;</span>
                <div class="name">database数据库</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe766;</span>
                <div class="name">menu菜单</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe767;</span>
                <div class="name">pentool钢笔工具</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe768;</span>
                <div class="name">downloadcloud云下载</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe769;</span>
                <div class="name">loader加载</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">key钥匙</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">nav_a导航a</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
                <div class="name">film影片</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76d;</span>
                <div class="name">cornerdownleft箭头</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76e;</span>
                <div class="name">rewind倒回</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76f;</span>
                <div class="name">scissors剪刀</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">save保存</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe771;</span>
                <div class="name">navigation导航</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe772;</span>
                <div class="name">search搜索</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe773;</span>
                <div class="name">plus加号</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe774;</span>
                <div class="name">info信息</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe775;</span>
                <div class="name">navigation2导航</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe776;</span>
                <div class="name">image图片</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe777;</span>
                <div class="name">disc唱片</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe778;</span>
                <div class="name">phoneoff电话关闭</div>
                <div class="code-name">&amp;#xe778;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe779;</span>
                <div class="name">phonemissed未接通</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77a;</span>
                <div class="name">refresh刷新2</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77b;</span>
                <div class="name">mousepointer鼠标</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77c;</span>
                <div class="name">rotate旋转2</div>
                <div class="code-name">&amp;#xe77c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77d;</span>
                <div class="name">rss订阅</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77e;</span>
                <div class="name">server服务器</div>
                <div class="code-name">&amp;#xe77e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77f;</span>
                <div class="name">send发送</div>
                <div class="code-name">&amp;#xe77f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe780;</span>
                <div class="name">settings设置</div>
                <div class="code-name">&amp;#xe780;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe781;</span>
                <div class="name">refresh刷新</div>
                <div class="code-name">&amp;#xe781;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe782;</span>
                <div class="name">feather羽毛</div>
                <div class="code-name">&amp;#xe782;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe783;</span>
                <div class="name">shoppingcart购物车</div>
                <div class="code-name">&amp;#xe783;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe784;</span>
                <div class="name">shoppingbag购物袋</div>
                <div class="code-name">&amp;#xe784;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe785;</span>
                <div class="name">shieldoff盾牌关闭</div>
                <div class="code-name">&amp;#xe785;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe786;</span>
                <div class="name">flag旗</div>
                <div class="code-name">&amp;#xe786;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe787;</span>
                <div class="name">share分享2</div>
                <div class="code-name">&amp;#xe787;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe788;</span>
                <div class="name">fileminus减文件</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe789;</span>
                <div class="name">shuffle挪动</div>
                <div class="code-name">&amp;#xe789;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78a;</span>
                <div class="name">skipback快退</div>
                <div class="code-name">&amp;#xe78a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78b;</span>
                <div class="name">sidebar侧边栏</div>
                <div class="code-name">&amp;#xe78b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78c;</span>
                <div class="name">maximize全屏</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78d;</span>
                <div class="name">sliders滑钮</div>
                <div class="code-name">&amp;#xe78d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78e;</span>
                <div class="name">slash禁止</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78f;</span>
                <div class="name">eyeoff眼睛关闭</div>
                <div class="code-name">&amp;#xe78f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe790;</span>
                <div class="name">skipforward快进</div>
                <div class="code-name">&amp;#xe790;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe791;</span>
                <div class="name">externallink分享</div>
                <div class="code-name">&amp;#xe791;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe792;</span>
                <div class="name">slack松懈</div>
                <div class="code-name">&amp;#xe792;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe793;</span>
                <div class="name">smartphone手机</div>
                <div class="code-name">&amp;#xe793;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe794;</span>
                <div class="name">minimize窗口化2</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe795;</span>
                <div class="name">cpu处理器</div>
                <div class="code-name">&amp;#xe795;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe796;</span>
                <div class="name">stopcircle停止</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe797;</span>
                <div class="name">sofachair沙发</div>
                <div class="code-name">&amp;#xe797;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe798;</span>
                <div class="name">speaker扬声器</div>
                <div class="code-name">&amp;#xe798;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe799;</span>
                <div class="name">star星星</div>
                <div class="code-name">&amp;#xe799;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79a;</span>
                <div class="name">sun太阳</div>
                <div class="code-name">&amp;#xe79a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79b;</span>
                <div class="name">sunrise日出</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79c;</span>
                <div class="name">tablet平板</div>
                <div class="code-name">&amp;#xe79c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79d;</span>
                <div class="name">tag标签</div>
                <div class="code-name">&amp;#xe79d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79e;</span>
                <div class="name">layers层级</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79f;</span>
                <div class="name">grid方格</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">sunset日落</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a1;</span>
                <div class="name">thumbsup点赞</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a2;</span>
                <div class="name">thermometer温度计</div>
                <div class="code-name">&amp;#xe7a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a3;</span>
                <div class="name">terminal终端</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">piechart饼图</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a5;</span>
                <div class="name">tool工具</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a6;</span>
                <div class="name">repeat重复</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a7;</span>
                <div class="name">rotate旋转</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a8;</span>
                <div class="name">trash垃圾2</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a9;</span>
                <div class="name">shield盾牌</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7aa;</span>
                <div class="name">target靶子</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ab;</span>
                <div class="name">share分享</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ac;</span>
                <div class="name">userplus添加用户</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ad;</span>
                <div class="name">unlock解锁</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ae;</span>
                <div class="name">trash垃圾</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7af;</span>
                <div class="name">uploadcloud上传云</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">truck卡车</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b1;</span>
                <div class="name">tv电视</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">thumbsdown吐槽</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">umbrella伞</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b4;</span>
                <div class="name">xcircle叉</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b5;</span>
                <div class="name">xoctagon叉</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b6;</span>
                <div class="name">upload上传</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b7;</span>
                <div class="name">x叉</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b8;</span>
                <div class="name">users多用户</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b9;</span>
                <div class="name">userminus删除用户</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ba;</span>
                <div class="name">userx用户检查</div>
                <div class="code-name">&amp;#xe7ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bb;</span>
                <div class="name">video视频</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bc;</span>
                <div class="name">user用户</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bd;</span>
                <div class="name">watch手表</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7be;</span>
                <div class="name">zoomout缩小</div>
                <div class="code-name">&amp;#xe7be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bf;</span>
                <div class="name">trendingdown趋势2</div>
                <div class="code-name">&amp;#xe7bf;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1680960854906'); /* IE9 */
  src: url('iconfont.eot?t=1680960854906#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1680960854906') format('woff2'),
       url('iconfont.woff?t=1680960854906') format('woff'),
       url('iconfont.ttf?t=1680960854906') format('truetype'),
       url('iconfont.svg?t=1680960854906#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-rili"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.icon-rili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanyi"></span>
            <div class="name">
              翻译
            </div>
            <div class="code-name">.icon-fanyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuque"></span>
            <div class="name">
              yuque
            </div>
            <div class="code-name">.icon-yuque
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-github"></span>
            <div class="name">
              github
            </div>
            <div class="code-name">.icon-github
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gitee-fill-round"></span>
            <div class="name">
              gitee-fill-round
            </div>
            <div class="code-name">.icon-gitee-fill-round
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuque-fill"></span>
            <div class="name">
              语雀
            </div>
            <div class="code-name">.icon-yuque-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaoyu"></span>
            <div class="name">
              教育
            </div>
            <div class="code-name">.icon-jiaoyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-server"></span>
            <div class="name">
              服务器
            </div>
            <div class="code-name">.icon-server
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-server-network"></span>
            <div class="name">
              服务器网络
            </div>
            <div class="code-name">.icon-server-network
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-server-alt"></span>
            <div class="name">
              服务器-全部
            </div>
            <div class="code-name">.icon-server-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-server-network-alt"></span>
            <div class="name">
              服务器-网络更变
            </div>
            <div class="code-name">.icon-server-network-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-brackets-curly"></span>
            <div class="name">
              大括号
            </div>
            <div class="code-name">.icon-brackets-curly
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-browser"></span>
            <div class="name">
              浏览器
            </div>
            <div class="code-name">.icon-browser
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shubiao"></span>
            <div class="name">
              鼠标
            </div>
            <div class="code-name">.icon-shubiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-volumejingyin"></span>
            <div class="name">
              volume静音
            </div>
            <div class="code-name">.icon-volumejingyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zap"></span>
            <div class="name">
              zap
            </div>
            <div class="code-name">.icon-zap
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-volumeyinliangxiao"></span>
            <div class="name">
              volume音量小
            </div>
            <div class="code-name">.icon-volumeyinliangxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wifioffwuxianwang"></span>
            <div class="name">
              wifioff无线网
            </div>
            <div class="code-name">.icon-wifioffwuxianwang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-trendingdownqushi"></span>
            <div class="name">
              trendingdown趋势
            </div>
            <div class="code-name">.icon-trendingdownqushi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-videooffshipinguanbi"></span>
            <div class="name">
              videooff视频关闭
            </div>
            <div class="code-name">.icon-videooffshipinguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wifiwuxianwang"></span>
            <div class="name">
              wifi无线网
            </div>
            <div class="code-name">.icon-wifiwuxianwang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-volumeyinliang"></span>
            <div class="name">
              volume音量
            </div>
            <div class="code-name">.icon-volumeyinliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zapoff"></span>
            <div class="name">
              zapoff
            </div>
            <div class="code-name">.icon-zapoff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-volumeyinliangda"></span>
            <div class="name">
              volume音量大
            </div>
            <div class="code-name">.icon-volumeyinliangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zoominfangda"></span>
            <div class="name">
              zoomin放大
            </div>
            <div class="code-name">.icon-zoominfangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xsquarecha"></span>
            <div class="name">
              xsquare叉
            </div>
            <div class="code-name">.icon-xsquarecha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-windfeng"></span>
            <div class="name">
              wind风
            </div>
            <div class="code-name">.icon-windfeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alert_abaojinga"></span>
            <div class="name">
              alert_a报警a
            </div>
            <div class="code-name">.icon-alert_abaojinga
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-usercheckyonghuhedui"></span>
            <div class="name">
              usercheck用户核对
            </div>
            <div class="code-name">.icon-usercheckyonghuhedui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anchormao"></span>
            <div class="name">
              anchor锚
            </div>
            <div class="code-name">.icon-anchormao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkgou"></span>
            <div class="name">
              check勾
            </div>
            <div class="code-name">.icon-checkgou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alert_bbaojingb"></span>
            <div class="name">
              alert_b报警b
            </div>
            <div class="code-name">.icon-alert_bbaojingb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_24_cebianshouqi"></span>
            <div class="name">
              icon_24_侧边收起
            </div>
            <div class="code-name">.icon-icon_24_cebianshouqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-airplaytouping"></span>
            <div class="name">
              airplay投屏
            </div>
            <div class="code-name">.icon-airplaytouping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alert_cbaojingc"></span>
            <div class="name">
              alert_c报警c
            </div>
            <div class="code-name">.icon-alert_cbaojingc
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-apertureguangquan"></span>
            <div class="name">
              aperture光圈
            </div>
            <div class="code-name">.icon-apertureguangquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowdowncirclexiayuanjiantou"></span>
            <div class="name">
              arrowdowncircle下圆箭头
            </div>
            <div class="code-name">.icon-arrowdowncirclexiayuanjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-archivedangan"></span>
            <div class="name">
              archive档案
            </div>
            <div class="code-name">.icon-archivedangan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-activityhuodong"></span>
            <div class="name">
              activity活动
            </div>
            <div class="code-name">.icon-activityhuodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowdownxiajiantou"></span>
            <div class="name">
              arrowdown下箭头
            </div>
            <div class="code-name">.icon-arrowdownxiajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowuprightshangyoujiantou"></span>
            <div class="name">
              arrowupright上右箭头
            </div>
            <div class="code-name">.icon-arrowuprightshangyoujiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowupshangjiantou"></span>
            <div class="name">
              arrowup上箭头
            </div>
            <div class="code-name">.icon-arrowupshangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowrightyoujiantou"></span>
            <div class="name">
              arrowright右箭头
            </div>
            <div class="code-name">.icon-arrowrightyoujiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowupleftshangzuojiantou"></span>
            <div class="name">
              arrowupleft上左箭头
            </div>
            <div class="code-name">.icon-arrowupleftshangzuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowrightcircleyouyuanjiantou"></span>
            <div class="name">
              arrowrightcircle右圆箭头
            </div>
            <div class="code-name">.icon-arrowrightcircleyouyuanjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowleftzuojiantou"></span>
            <div class="name">
              arrowleft左箭头
            </div>
            <div class="code-name">.icon-arrowleftzuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-atsign"></span>
            <div class="name">
              atsign
            </div>
            <div class="code-name">.icon-atsign
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowupcircleshangyuanjiantou"></span>
            <div class="name">
              arrowupcircle上圆箭头
            </div>
            <div class="code-name">.icon-arrowupcircleshangyuanjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-barchartdaohanga"></span>
            <div class="name">
              barchart导航a
            </div>
            <div class="code-name">.icon-barchartdaohanga
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-barchartdaohangb"></span>
            <div class="name">
              barchart导航b
            </div>
            <div class="code-name">.icon-barchartdaohangb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowleftcirclezuoyuanjiantou"></span>
            <div class="name">
              arrowleftcircle左圆箭头
            </div>
            <div class="code-name">.icon-arrowleftcirclezuoyuanjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-batterydianchi"></span>
            <div class="name">
              battery电池
            </div>
            <div class="code-name">.icon-batterydianchi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-batterychargingchongdian"></span>
            <div class="name">
              batterycharging充电
            </div>
            <div class="code-name">.icon-batterychargingchongdian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-belloffbaojingguanbi"></span>
            <div class="name">
              belloff报警关闭
            </div>
            <div class="code-name">.icon-belloffbaojingguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bookshu"></span>
            <div class="name">
              book书
            </div>
            <div class="code-name">.icon-bookshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-belljingbao"></span>
            <div class="name">
              bell警报
            </div>
            <div class="code-name">.icon-belljingbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-awardjiangzhang"></span>
            <div class="name">
              award奖章
            </div>
            <div class="code-name">.icon-awardjiangzhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bluetoothlanya"></span>
            <div class="name">
              bluetooth蓝牙
            </div>
            <div class="code-name">.icon-bluetoothlanya
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-boxhezi"></span>
            <div class="name">
              box盒子
            </div>
            <div class="code-name">.icon-boxhezi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bookopenshu"></span>
            <div class="name">
              bookopen书
            </div>
            <div class="code-name">.icon-bookopenshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bookmarkshuqian"></span>
            <div class="name">
              bookmark书签
            </div>
            <div class="code-name">.icon-bookmarkshuqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-casttoushe"></span>
            <div class="name">
              cast投射
            </div>
            <div class="code-name">.icon-casttoushe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cameraxiangji"></span>
            <div class="name">
              camera相机
            </div>
            <div class="code-name">.icon-cameraxiangji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-calendarrili"></span>
            <div class="name">
              calendar日历
            </div>
            <div class="code-name">.icon-calendarrili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cameraoffxiangjiguanbi"></span>
            <div class="name">
              cameraoff相机关闭
            </div>
            <div class="code-name">.icon-cameraoffxiangjiguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chevronleftzuojiantou"></span>
            <div class="name">
              chevronleft左箭头
            </div>
            <div class="code-name">.icon-chevronleftzuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chevrondownxiajiantou"></span>
            <div class="name">
              chevrondown下箭头
            </div>
            <div class="code-name">.icon-chevrondownxiajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checkcircleyuangou"></span>
            <div class="name">
              checkcircle圆勾
            </div>
            <div class="code-name">.icon-checkcircleyuangou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chevronrightyoujiantou"></span>
            <div class="name">
              chevronright右箭头
            </div>
            <div class="code-name">.icon-chevronrightyoujiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chevronsdownshuangxiajiantou"></span>
            <div class="name">
              chevronsdown双下箭头
            </div>
            <div class="code-name">.icon-chevronsdownshuangxiajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checksquarefanggou"></span>
            <div class="name">
              checksquare方勾
            </div>
            <div class="code-name">.icon-checksquarefanggou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-briefcasegongwenbao"></span>
            <div class="name">
              briefcase公文包
            </div>
            <div class="code-name">.icon-briefcasegongwenbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clipboardxieziban"></span>
            <div class="name">
              clipboard写字板
            </div>
            <div class="code-name">.icon-clipboardxieziban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chromeyoulanqi"></span>
            <div class="name">
              chrome游览器
            </div>
            <div class="code-name">.icon-chromeyoulanqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chevronupshangjiantou"></span>
            <div class="name">
              chevronup上箭头
            </div>
            <div class="code-name">.icon-chevronupshangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chevronsrightshuangyoujiantou"></span>
            <div class="name">
              chevronsright双右箭头
            </div>
            <div class="code-name">.icon-chevronsrightshuangyoujiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chevronsupshuangshangjiantou"></span>
            <div class="name">
              chevronsup双上箭头
            </div>
            <div class="code-name">.icon-chevronsupshuangshangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudlightningshandian"></span>
            <div class="name">
              cloudlightning闪电
            </div>
            <div class="code-name">.icon-cloudlightningshandian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clockshizhong"></span>
            <div class="name">
              clock时钟
            </div>
            <div class="code-name">.icon-clockshizhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudyun"></span>
            <div class="name">
              cloud云
            </div>
            <div class="code-name">.icon-cloudyun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudraindayu"></span>
            <div class="name">
              cloudrain大雨
            </div>
            <div class="code-name">.icon-cloudraindayu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clouddrizzlexiaoyu"></span>
            <div class="name">
              clouddrizzle小雨
            </div>
            <div class="code-name">.icon-clouddrizzlexiaoyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-codebianma"></span>
            <div class="name">
              code编码
            </div>
            <div class="code-name">.icon-codebianma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chevronsleftshuangzuojiantou"></span>
            <div class="name">
              chevronsleft双左箭头
            </div>
            <div class="code-name">.icon-chevronsleftshuangzuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudsnowxiaoxue"></span>
            <div class="name">
              cloudsnow小雪
            </div>
            <div class="code-name">.icon-cloudsnowxiaoxue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudofftianqiguanbi"></span>
            <div class="name">
              cloudoff天气关闭
            </div>
            <div class="code-name">.icon-cloudofftianqiguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-codepen"></span>
            <div class="name">
              codepen
            </div>
            <div class="code-name">.icon-codepen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mappinditu2"></span>
            <div class="name">
              mappin地图2
            </div>
            <div class="code-name">.icon-mappinditu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gitpullrequestxuqiu"></span>
            <div class="name">
              gitpullrequest需求
            </div>
            <div class="code-name">.icon-gitpullrequestxuqiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eyeyanjing"></span>
            <div class="name">
              eye眼睛
            </div>
            <div class="code-name">.icon-eyeyanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-morehorizontalgengduo"></span>
            <div class="name">
              morehorizontal更多
            </div>
            <div class="code-name">.icon-morehorizontalgengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-headphoneserji"></span>
            <div class="name">
              headphones耳机
            </div>
            <div class="code-name">.icon-headphoneserji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lifebuoyjiushengquan"></span>
            <div class="name">
              lifebuoy救生圈
            </div>
            <div class="code-name">.icon-lifebuoyjiushengquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dropletshuidi"></span>
            <div class="name">
              droplet水滴
            </div>
            <div class="code-name">.icon-dropletshuidi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-linklianjie"></span>
            <div class="name">
              link链接
            </div>
            <div class="code-name">.icon-linklianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-downloadxiazai"></span>
            <div class="name">
              download下载
            </div>
            <div class="code-name">.icon-downloadxiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-filterguolv"></span>
            <div class="name">
              filter过滤
            </div>
            <div class="code-name">.icon-filterguolv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layoutbuju"></span>
            <div class="name">
              layout布局
            </div>
            <div class="code-name">.icon-layoutbuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dollarsignqian"></span>
            <div class="name">
              dollarsign钱
            </div>
            <div class="code-name">.icon-dollarsignqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cornerleftupjiantou"></span>
            <div class="name">
              cornerleftup箭头
            </div>
            <div class="code-name">.icon-cornerleftupjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gitcommitfenzhi2"></span>
            <div class="name">
              gitcommit分之2
            </div>
            <div class="code-name">.icon-gitcommitfenzhi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-compasszhinanzhen"></span>
            <div class="name">
              compass指南针
            </div>
            <div class="code-name">.icon-compasszhinanzhen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gitbranchfenzhi"></span>
            <div class="name">
              gitbranch分支
            </div>
            <div class="code-name">.icon-gitbranchfenzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-micoffhuatongguan"></span>
            <div class="name">
              micoff话筒关
            </div>
            <div class="code-name">.icon-micoffhuatongguan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-codesandbox"></span>
            <div class="name">
              codesandbox
            </div>
            <div class="code-name">.icon-codesandbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-messagecirclexiaoxi1"></span>
            <div class="name">
              messagecircle消息1
            </div>
            <div class="code-name">.icon-messagecirclexiaoxi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editbianji"></span>
            <div class="name">
              edit编辑
            </div>
            <div class="code-name">.icon-editbianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copyfuzhi"></span>
            <div class="name">
              copy复制
            </div>
            <div class="code-name">.icon-copyfuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cornerrightupjiantou"></span>
            <div class="name">
              cornerrightup箭头
            </div>
            <div class="code-name">.icon-cornerrightupjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-coffeekafei"></span>
            <div class="name">
              coffee咖啡
            </div>
            <div class="code-name">.icon-coffeekafei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gitmergehebingronghe"></span>
            <div class="name">
              gitmerge合并融合
            </div>
            <div class="code-name">.icon-gitmergehebingronghe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cornerupleftjiantou"></span>
            <div class="name">
              cornerupleft箭头
            </div>
            <div class="code-name">.icon-cornerupleftjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moreverticalgengduo"></span>
            <div class="name">
              morevertical更多
            </div>
            <div class="code-name">.icon-moreverticalgengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-logoutzhuxiao"></span>
            <div class="name">
              logout注销
            </div>
            <div class="code-name">.icon-logoutzhuxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-homezhuye"></span>
            <div class="name">
              home主页
            </div>
            <div class="code-name">.icon-homezhuye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-commandzhiling"></span>
            <div class="name">
              command指令
            </div>
            <div class="code-name">.icon-commandzhiling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phonedianhua"></span>
            <div class="name">
              phone电话
            </div>
            <div class="code-name">.icon-phonedianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-percentbaifenbi"></span>
            <div class="name">
              percent百分比
            </div>
            <div class="code-name">.icon-percentbaifenbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-harddriveyingpan"></span>
            <div class="name">
              harddrive硬盘
            </div>
            <div class="code-name">.icon-harddriveyingpan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moveyidong"></span>
            <div class="name">
              move移动
            </div>
            <div class="code-name">.icon-moveyidong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dribbblezhuibolanqiu"></span>
            <div class="name">
              dribbble追波篮球
            </div>
            <div class="code-name">.icon-dribbblezhuibolanqiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-monitorxianshiqi"></span>
            <div class="name">
              monitor显示器
            </div>
            <div class="code-name">.icon-monitorxianshiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-corneruprightjiantou"></span>
            <div class="name">
              cornerupright箭头
            </div>
            <div class="code-name">.icon-corneruprightjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-musicyinle"></span>
            <div class="name">
              music音乐
            </div>
            <div class="code-name">.icon-musicyinle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-locksuo"></span>
            <div class="name">
              lock锁
            </div>
            <div class="code-name">.icon-locksuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-deleteshanchu"></span>
            <div class="name">
              delete删除
            </div>
            <div class="code-name">.icon-deleteshanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minimizechuangkouhua"></span>
            <div class="name">
              minimize窗口化
            </div>
            <div class="code-name">.icon-minimizechuangkouhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hashjinghao"></span>
            <div class="name">
              hash井号
            </div>
            <div class="code-name">.icon-hashjinghao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folderpluszhankaiwenjianjia"></span>
            <div class="name">
              folderplus展开文件夹
            </div>
            <div class="code-name">.icon-folderpluszhankaiwenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dividecirclechu"></span>
            <div class="name">
              dividecircle除
            </div>
            <div class="code-name">.icon-dividecirclechu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-columnszhuanlan"></span>
            <div class="name">
              columns专栏
            </div>
            <div class="code-name">.icon-columnszhuanlan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-filekongwenben"></span>
            <div class="name">
              file空文本
            </div>
            <div class="code-name">.icon-filekongwenben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cornerdownrightjiantou"></span>
            <div class="name">
              cornerdownright箭头
            </div>
            <div class="code-name">.icon-cornerdownrightjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dividechu"></span>
            <div class="name">
              divide除
            </div>
            <div class="code-name">.icon-dividechu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-heartxin"></span>
            <div class="name">
              heart心
            </div>
            <div class="code-name">.icon-heartxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cornerleftdownjiantou"></span>
            <div class="name">
              cornerleftdown箭头
            </div>
            <div class="code-name">.icon-cornerleftdownjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folderminusshouqiwenjianjia"></span>
            <div class="name">
              folderminus收起文件夹
            </div>
            <div class="code-name">.icon-folderminusshouqiwenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-filetextwenben"></span>
            <div class="name">
              filetext文本
            </div>
            <div class="code-name">.icon-filetextwenben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folderwenjianjia"></span>
            <div class="name">
              folder文件夹
            </div>
            <div class="code-name">.icon-folderwenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-playcirclebofang"></span>
            <div class="name">
              playcircle播放
            </div>
            <div class="code-name">.icon-playcirclebofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit2bianji2"></span>
            <div class="name">
              edit2编辑2
            </div>
            <div class="code-name">.icon-edit2bianji2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-globediqiu"></span>
            <div class="name">
              globe地球
            </div>
            <div class="code-name">.icon-globediqiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mapditu"></span>
            <div class="name">
              map地图
            </div>
            <div class="code-name">.icon-mapditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-listliebiao"></span>
            <div class="name">
              list列表
            </div>
            <div class="code-name">.icon-listliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-facebook"></span>
            <div class="name">
              facebook
            </div>
            <div class="code-name">.icon-facebook
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-giftliwu"></span>
            <div class="name">
              gift礼物
            </div>
            <div class="code-name">.icon-giftliwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-messagesquarexiaoxi2"></span>
            <div class="name">
              messagesquare消息2
            </div>
            <div class="code-name">.icon-messagesquarexiaoxi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-powerdianyuanguanbi"></span>
            <div class="name">
              power电源关闭
            </div>
            <div class="code-name">.icon-powerdianyuanguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plussquarefangjiahao"></span>
            <div class="name">
              plussquare方加号
            </div>
            <div class="code-name">.icon-plussquarefangjiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mailyoujian"></span>
            <div class="name">
              mail邮件
            </div>
            <div class="code-name">.icon-mailyoujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pausecirclezanting"></span>
            <div class="name">
              pausecircle暂停
            </div>
            <div class="code-name">.icon-pausecirclezanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pocketkoudai"></span>
            <div class="name">
              pocket口袋
            </div>
            <div class="code-name">.icon-pocketkoudai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-playbofang"></span>
            <div class="name">
              play播放
            </div>
            <div class="code-name">.icon-playbofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phoneoutgoingboda"></span>
            <div class="name">
              phoneoutgoing拨打
            </div>
            <div class="code-name">.icon-phoneoutgoingboda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cropcaiqie"></span>
            <div class="name">
              crop裁切
            </div>
            <div class="code-name">.icon-cropcaiqie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phoneforwardedboda"></span>
            <div class="name">
              phoneforwarded拨打
            </div>
            <div class="code-name">.icon-phoneforwardedboda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fastforwardkuaijin"></span>
            <div class="name">
              fastforward快进
            </div>
            <div class="code-name">.icon-fastforwardkuaijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-michuatong"></span>
            <div class="name">
              mic话筒
            </div>
            <div class="code-name">.icon-michuatong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-helpcirclebangzhu"></span>
            <div class="name">
              helpcircle帮助
            </div>
            <div class="code-name">.icon-helpcirclebangzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cornerrightdownjiantou"></span>
            <div class="name">
              cornerrightdown箭头
            </div>
            <div class="code-name">.icon-cornerrightdownjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fileplusjiawenjian"></span>
            <div class="name">
              fileplus加文件
            </div>
            <div class="code-name">.icon-fileplusjiawenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pausezanting"></span>
            <div class="name">
              pause暂停
            </div>
            <div class="code-name">.icon-pausezanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link2lianjie2"></span>
            <div class="name">
              link2链接2
            </div>
            <div class="code-name">.icon-link2lianjie2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-maximizezuidahua"></span>
            <div class="name">
              maximize最大化
            </div>
            <div class="code-name">.icon-maximizezuidahua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moonyueliang"></span>
            <div class="name">
              moon月亮
            </div>
            <div class="code-name">.icon-moonyueliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-packagebaoguo"></span>
            <div class="name">
              package包裹
            </div>
            <div class="code-name">.icon-packagebaoguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minussquarejian"></span>
            <div class="name">
              minussquare减
            </div>
            <div class="code-name">.icon-minussquarejian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-instagramxiangji"></span>
            <div class="name">
              instagram相机
            </div>
            <div class="code-name">.icon-instagramxiangji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-logindenglu"></span>
            <div class="name">
              login登陆
            </div>
            <div class="code-name">.icon-logindenglu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-papercliphuixingzhen"></span>
            <div class="name">
              paperclip回形针
            </div>
            <div class="code-name">.icon-papercliphuixingzhen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minuscirclejian"></span>
            <div class="name">
              minuscircle减
            </div>
            <div class="code-name">.icon-minuscirclejian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nav_cdaohangc"></span>
            <div class="name">
              nav_c导航c
            </div>
            <div class="code-name">.icon-nav_cdaohangc
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phoneincomingjieting"></span>
            <div class="name">
              phoneincoming接听
            </div>
            <div class="code-name">.icon-phoneincomingjieting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phonecalldianhuaboda"></span>
            <div class="name">
              phonecall电话拨打
            </div>
            <div class="code-name">.icon-phonecalldianhuaboda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-printerdayinji"></span>
            <div class="name">
              printer打印机
            </div>
            <div class="code-name">.icon-printerdayinji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-radioguangbo"></span>
            <div class="name">
              radio广播
            </div>
            <div class="code-name">.icon-radioguangbo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-creditcardxinyongka"></span>
            <div class="name">
              creditcard信用卡
            </div>
            <div class="code-name">.icon-creditcardxinyongka
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit3bianji3"></span>
            <div class="name">
              edit3编辑3
            </div>
            <div class="code-name">.icon-edit3bianji3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pluscircleyuanjiahao"></span>
            <div class="name">
              pluscircle圆加号
            </div>
            <div class="code-name">.icon-pluscircleyuanjiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-inboxshoujianxiang"></span>
            <div class="name">
              inbox收件箱
            </div>
            <div class="code-name">.icon-inboxshoujianxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nav_bdaohangb"></span>
            <div class="name">
              nav_b导航b
            </div>
            <div class="code-name">.icon-nav_bdaohangb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-crosshairmiaozhun"></span>
            <div class="name">
              crosshair瞄准
            </div>
            <div class="code-name">.icon-crosshairmiaozhun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-databaseshujuku"></span>
            <div class="name">
              database数据库
            </div>
            <div class="code-name">.icon-databaseshujuku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-menucaidan"></span>
            <div class="name">
              menu菜单
            </div>
            <div class="code-name">.icon-menucaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pentoolgangbigongju"></span>
            <div class="name">
              pentool钢笔工具
            </div>
            <div class="code-name">.icon-pentoolgangbigongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-downloadcloudyunxiazai"></span>
            <div class="name">
              downloadcloud云下载
            </div>
            <div class="code-name">.icon-downloadcloudyunxiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-loaderjiazai"></span>
            <div class="name">
              loader加载
            </div>
            <div class="code-name">.icon-loaderjiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-keyyuechi"></span>
            <div class="name">
              key钥匙
            </div>
            <div class="code-name">.icon-keyyuechi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nav_adaohanga"></span>
            <div class="name">
              nav_a导航a
            </div>
            <div class="code-name">.icon-nav_adaohanga
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-filmyingpian"></span>
            <div class="name">
              film影片
            </div>
            <div class="code-name">.icon-filmyingpian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cornerdownleftjiantou"></span>
            <div class="name">
              cornerdownleft箭头
            </div>
            <div class="code-name">.icon-cornerdownleftjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rewinddaohui"></span>
            <div class="name">
              rewind倒回
            </div>
            <div class="code-name">.icon-rewinddaohui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-scissorsjiandao"></span>
            <div class="name">
              scissors剪刀
            </div>
            <div class="code-name">.icon-scissorsjiandao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-savebaocun"></span>
            <div class="name">
              save保存
            </div>
            <div class="code-name">.icon-savebaocun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-navigationdaohang"></span>
            <div class="name">
              navigation导航
            </div>
            <div class="code-name">.icon-navigationdaohang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-searchsousuo"></span>
            <div class="name">
              search搜索
            </div>
            <div class="code-name">.icon-searchsousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plusjiahao"></span>
            <div class="name">
              plus加号
            </div>
            <div class="code-name">.icon-plusjiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-infoxinxi"></span>
            <div class="name">
              info信息
            </div>
            <div class="code-name">.icon-infoxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-navigation2daohang"></span>
            <div class="name">
              navigation2导航
            </div>
            <div class="code-name">.icon-navigation2daohang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-imagetupian"></span>
            <div class="name">
              image图片
            </div>
            <div class="code-name">.icon-imagetupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-discchangpian"></span>
            <div class="name">
              disc唱片
            </div>
            <div class="code-name">.icon-discchangpian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phoneoffdianhuaguanbi"></span>
            <div class="name">
              phoneoff电话关闭
            </div>
            <div class="code-name">.icon-phoneoffdianhuaguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phonemissedweijietong"></span>
            <div class="name">
              phonemissed未接通
            </div>
            <div class="code-name">.icon-phonemissedweijietong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refreshshuaxin2"></span>
            <div class="name">
              refresh刷新2
            </div>
            <div class="code-name">.icon-refreshshuaxin2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mousepointershubiao"></span>
            <div class="name">
              mousepointer鼠标
            </div>
            <div class="code-name">.icon-mousepointershubiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rotatexuanzhuan2"></span>
            <div class="name">
              rotate旋转2
            </div>
            <div class="code-name">.icon-rotatexuanzhuan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rssdingyue"></span>
            <div class="name">
              rss订阅
            </div>
            <div class="code-name">.icon-rssdingyue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-serverfuwuqi"></span>
            <div class="name">
              server服务器
            </div>
            <div class="code-name">.icon-serverfuwuqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sendfasong"></span>
            <div class="name">
              send发送
            </div>
            <div class="code-name">.icon-sendfasong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settingsshezhi"></span>
            <div class="name">
              settings设置
            </div>
            <div class="code-name">.icon-settingsshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refreshshuaxin"></span>
            <div class="name">
              refresh刷新
            </div>
            <div class="code-name">.icon-refreshshuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-featheryumao"></span>
            <div class="name">
              feather羽毛
            </div>
            <div class="code-name">.icon-featheryumao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoppingcartgouwuche"></span>
            <div class="name">
              shoppingcart购物车
            </div>
            <div class="code-name">.icon-shoppingcartgouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoppingbaggouwudai"></span>
            <div class="name">
              shoppingbag购物袋
            </div>
            <div class="code-name">.icon-shoppingbaggouwudai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shieldoffdunpaiguanbi"></span>
            <div class="name">
              shieldoff盾牌关闭
            </div>
            <div class="code-name">.icon-shieldoffdunpaiguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flagqi"></span>
            <div class="name">
              flag旗
            </div>
            <div class="code-name">.icon-flagqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sharefenxiang2"></span>
            <div class="name">
              share分享2
            </div>
            <div class="code-name">.icon-sharefenxiang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fileminusjianwenjian"></span>
            <div class="name">
              fileminus减文件
            </div>
            <div class="code-name">.icon-fileminusjianwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shufflenuodong"></span>
            <div class="name">
              shuffle挪动
            </div>
            <div class="code-name">.icon-shufflenuodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-skipbackkuaitui"></span>
            <div class="name">
              skipback快退
            </div>
            <div class="code-name">.icon-skipbackkuaitui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sidebarcebianlan"></span>
            <div class="name">
              sidebar侧边栏
            </div>
            <div class="code-name">.icon-sidebarcebianlan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-maximizequanping"></span>
            <div class="name">
              maximize全屏
            </div>
            <div class="code-name">.icon-maximizequanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-slidershuaniu"></span>
            <div class="name">
              sliders滑钮
            </div>
            <div class="code-name">.icon-slidershuaniu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-slashjinzhi"></span>
            <div class="name">
              slash禁止
            </div>
            <div class="code-name">.icon-slashjinzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eyeoffyanjingguanbi"></span>
            <div class="name">
              eyeoff眼睛关闭
            </div>
            <div class="code-name">.icon-eyeoffyanjingguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-skipforwardkuaijin"></span>
            <div class="name">
              skipforward快进
            </div>
            <div class="code-name">.icon-skipforwardkuaijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-externallinkfenxiang"></span>
            <div class="name">
              externallink分享
            </div>
            <div class="code-name">.icon-externallinkfenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-slacksongxie"></span>
            <div class="name">
              slack松懈
            </div>
            <div class="code-name">.icon-slacksongxie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartphoneshouji"></span>
            <div class="name">
              smartphone手机
            </div>
            <div class="code-name">.icon-smartphoneshouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minimizechuangkouhua2"></span>
            <div class="name">
              minimize窗口化2
            </div>
            <div class="code-name">.icon-minimizechuangkouhua2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cpuchuliqi"></span>
            <div class="name">
              cpu处理器
            </div>
            <div class="code-name">.icon-cpuchuliqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stopcircletingzhi"></span>
            <div class="name">
              stopcircle停止
            </div>
            <div class="code-name">.icon-stopcircletingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sofachairshafa"></span>
            <div class="name">
              sofachair沙发
            </div>
            <div class="code-name">.icon-sofachairshafa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-speakeryangshengqi"></span>
            <div class="name">
              speaker扬声器
            </div>
            <div class="code-name">.icon-speakeryangshengqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-starxingxing"></span>
            <div class="name">
              star星星
            </div>
            <div class="code-name">.icon-starxingxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suntaiyang"></span>
            <div class="name">
              sun太阳
            </div>
            <div class="code-name">.icon-suntaiyang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sunriserichu"></span>
            <div class="name">
              sunrise日出
            </div>
            <div class="code-name">.icon-sunriserichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tabletpingban"></span>
            <div class="name">
              tablet平板
            </div>
            <div class="code-name">.icon-tabletpingban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tagbiaoqian"></span>
            <div class="name">
              tag标签
            </div>
            <div class="code-name">.icon-tagbiaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layerscengji"></span>
            <div class="name">
              layers层级
            </div>
            <div class="code-name">.icon-layerscengji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gridfangge"></span>
            <div class="name">
              grid方格
            </div>
            <div class="code-name">.icon-gridfangge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sunsetrila"></span>
            <div class="name">
              sunset日落
            </div>
            <div class="code-name">.icon-sunsetrila
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumbsupdianzan"></span>
            <div class="name">
              thumbsup点赞
            </div>
            <div class="code-name">.icon-thumbsupdianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thermometerwenduji"></span>
            <div class="name">
              thermometer温度计
            </div>
            <div class="code-name">.icon-thermometerwenduji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-terminalzhongduan"></span>
            <div class="name">
              terminal终端
            </div>
            <div class="code-name">.icon-terminalzhongduan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-piechartbingtu"></span>
            <div class="name">
              piechart饼图
            </div>
            <div class="code-name">.icon-piechartbingtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-toolgongju"></span>
            <div class="name">
              tool工具
            </div>
            <div class="code-name">.icon-toolgongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-repeatzhongfu"></span>
            <div class="name">
              repeat重复
            </div>
            <div class="code-name">.icon-repeatzhongfu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rotatexuanzhuan"></span>
            <div class="name">
              rotate旋转
            </div>
            <div class="code-name">.icon-rotatexuanzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-trashlaji2"></span>
            <div class="name">
              trash垃圾2
            </div>
            <div class="code-name">.icon-trashlaji2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shielddunpai"></span>
            <div class="name">
              shield盾牌
            </div>
            <div class="code-name">.icon-shielddunpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-targetbazi"></span>
            <div class="name">
              target靶子
            </div>
            <div class="code-name">.icon-targetbazi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sharefenxiang"></span>
            <div class="name">
              share分享
            </div>
            <div class="code-name">.icon-sharefenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-userplustianjiayonghu"></span>
            <div class="name">
              userplus添加用户
            </div>
            <div class="code-name">.icon-userplustianjiayonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlockjiesuo"></span>
            <div class="name">
              unlock解锁
            </div>
            <div class="code-name">.icon-unlockjiesuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-trashlaji"></span>
            <div class="name">
              trash垃圾
            </div>
            <div class="code-name">.icon-trashlaji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-uploadcloudshangchuanyun"></span>
            <div class="name">
              uploadcloud上传云
            </div>
            <div class="code-name">.icon-uploadcloudshangchuanyun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-truckkache"></span>
            <div class="name">
              truck卡车
            </div>
            <div class="code-name">.icon-truckkache
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tvdianshi"></span>
            <div class="name">
              tv电视
            </div>
            <div class="code-name">.icon-tvdianshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumbsdowntucao"></span>
            <div class="name">
              thumbsdown吐槽
            </div>
            <div class="code-name">.icon-thumbsdowntucao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-umbrellasan"></span>
            <div class="name">
              umbrella伞
            </div>
            <div class="code-name">.icon-umbrellasan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xcirclecha"></span>
            <div class="name">
              xcircle叉
            </div>
            <div class="code-name">.icon-xcirclecha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xoctagoncha"></span>
            <div class="name">
              xoctagon叉
            </div>
            <div class="code-name">.icon-xoctagoncha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-uploadshangchuan"></span>
            <div class="name">
              upload上传
            </div>
            <div class="code-name">.icon-uploadshangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xcha"></span>
            <div class="name">
              x叉
            </div>
            <div class="code-name">.icon-xcha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-usersduoyonghu"></span>
            <div class="name">
              users多用户
            </div>
            <div class="code-name">.icon-usersduoyonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-userminusshanchuyonghu"></span>
            <div class="name">
              userminus删除用户
            </div>
            <div class="code-name">.icon-userminusshanchuyonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-userxyonghujiancha"></span>
            <div class="name">
              userx用户检查
            </div>
            <div class="code-name">.icon-userxyonghujiancha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-videoshipin"></span>
            <div class="name">
              video视频
            </div>
            <div class="code-name">.icon-videoshipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-useryonghu"></span>
            <div class="name">
              user用户
            </div>
            <div class="code-name">.icon-useryonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-watchshoubiao"></span>
            <div class="name">
              watch手表
            </div>
            <div class="code-name">.icon-watchshoubiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zoomoutsuoxiao"></span>
            <div class="name">
              zoomout缩小
            </div>
            <div class="code-name">.icon-zoomoutsuoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-trendingdownqushi2"></span>
            <div class="name">
              trendingdown趋势2
            </div>
            <div class="code-name">.icon-trendingdownqushi2
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rili"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#icon-rili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanyi"></use>
                </svg>
                <div class="name">翻译</div>
                <div class="code-name">#icon-fanyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuque"></use>
                </svg>
                <div class="name">yuque</div>
                <div class="code-name">#icon-yuque</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-github"></use>
                </svg>
                <div class="name">github</div>
                <div class="code-name">#icon-github</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gitee-fill-round"></use>
                </svg>
                <div class="name">gitee-fill-round</div>
                <div class="code-name">#icon-gitee-fill-round</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuque-fill"></use>
                </svg>
                <div class="name">语雀</div>
                <div class="code-name">#icon-yuque-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaoyu"></use>
                </svg>
                <div class="name">教育</div>
                <div class="code-name">#icon-jiaoyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-server"></use>
                </svg>
                <div class="name">服务器</div>
                <div class="code-name">#icon-server</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-server-network"></use>
                </svg>
                <div class="name">服务器网络</div>
                <div class="code-name">#icon-server-network</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-server-alt"></use>
                </svg>
                <div class="name">服务器-全部</div>
                <div class="code-name">#icon-server-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-server-network-alt"></use>
                </svg>
                <div class="name">服务器-网络更变</div>
                <div class="code-name">#icon-server-network-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brackets-curly"></use>
                </svg>
                <div class="name">大括号</div>
                <div class="code-name">#icon-brackets-curly</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-browser"></use>
                </svg>
                <div class="name">浏览器</div>
                <div class="code-name">#icon-browser</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shubiao"></use>
                </svg>
                <div class="name">鼠标</div>
                <div class="code-name">#icon-shubiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-volumejingyin"></use>
                </svg>
                <div class="name">volume静音</div>
                <div class="code-name">#icon-volumejingyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zap"></use>
                </svg>
                <div class="name">zap</div>
                <div class="code-name">#icon-zap</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-volumeyinliangxiao"></use>
                </svg>
                <div class="name">volume音量小</div>
                <div class="code-name">#icon-volumeyinliangxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wifioffwuxianwang"></use>
                </svg>
                <div class="name">wifioff无线网</div>
                <div class="code-name">#icon-wifioffwuxianwang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-trendingdownqushi"></use>
                </svg>
                <div class="name">trendingdown趋势</div>
                <div class="code-name">#icon-trendingdownqushi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-videooffshipinguanbi"></use>
                </svg>
                <div class="name">videooff视频关闭</div>
                <div class="code-name">#icon-videooffshipinguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wifiwuxianwang"></use>
                </svg>
                <div class="name">wifi无线网</div>
                <div class="code-name">#icon-wifiwuxianwang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-volumeyinliang"></use>
                </svg>
                <div class="name">volume音量</div>
                <div class="code-name">#icon-volumeyinliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zapoff"></use>
                </svg>
                <div class="name">zapoff</div>
                <div class="code-name">#icon-zapoff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-volumeyinliangda"></use>
                </svg>
                <div class="name">volume音量大</div>
                <div class="code-name">#icon-volumeyinliangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoominfangda"></use>
                </svg>
                <div class="name">zoomin放大</div>
                <div class="code-name">#icon-zoominfangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xsquarecha"></use>
                </svg>
                <div class="name">xsquare叉</div>
                <div class="code-name">#icon-xsquarecha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-windfeng"></use>
                </svg>
                <div class="name">wind风</div>
                <div class="code-name">#icon-windfeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alert_abaojinga"></use>
                </svg>
                <div class="name">alert_a报警a</div>
                <div class="code-name">#icon-alert_abaojinga</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-usercheckyonghuhedui"></use>
                </svg>
                <div class="name">usercheck用户核对</div>
                <div class="code-name">#icon-usercheckyonghuhedui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anchormao"></use>
                </svg>
                <div class="name">anchor锚</div>
                <div class="code-name">#icon-anchormao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkgou"></use>
                </svg>
                <div class="name">check勾</div>
                <div class="code-name">#icon-checkgou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alert_bbaojingb"></use>
                </svg>
                <div class="name">alert_b报警b</div>
                <div class="code-name">#icon-alert_bbaojingb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_24_cebianshouqi"></use>
                </svg>
                <div class="name">icon_24_侧边收起</div>
                <div class="code-name">#icon-icon_24_cebianshouqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-airplaytouping"></use>
                </svg>
                <div class="name">airplay投屏</div>
                <div class="code-name">#icon-airplaytouping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alert_cbaojingc"></use>
                </svg>
                <div class="name">alert_c报警c</div>
                <div class="code-name">#icon-alert_cbaojingc</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-apertureguangquan"></use>
                </svg>
                <div class="name">aperture光圈</div>
                <div class="code-name">#icon-apertureguangquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowdowncirclexiayuanjiantou"></use>
                </svg>
                <div class="name">arrowdowncircle下圆箭头</div>
                <div class="code-name">#icon-arrowdowncirclexiayuanjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-archivedangan"></use>
                </svg>
                <div class="name">archive档案</div>
                <div class="code-name">#icon-archivedangan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-activityhuodong"></use>
                </svg>
                <div class="name">activity活动</div>
                <div class="code-name">#icon-activityhuodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowdownxiajiantou"></use>
                </svg>
                <div class="name">arrowdown下箭头</div>
                <div class="code-name">#icon-arrowdownxiajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowuprightshangyoujiantou"></use>
                </svg>
                <div class="name">arrowupright上右箭头</div>
                <div class="code-name">#icon-arrowuprightshangyoujiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowupshangjiantou"></use>
                </svg>
                <div class="name">arrowup上箭头</div>
                <div class="code-name">#icon-arrowupshangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowrightyoujiantou"></use>
                </svg>
                <div class="name">arrowright右箭头</div>
                <div class="code-name">#icon-arrowrightyoujiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowupleftshangzuojiantou"></use>
                </svg>
                <div class="name">arrowupleft上左箭头</div>
                <div class="code-name">#icon-arrowupleftshangzuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowrightcircleyouyuanjiantou"></use>
                </svg>
                <div class="name">arrowrightcircle右圆箭头</div>
                <div class="code-name">#icon-arrowrightcircleyouyuanjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowleftzuojiantou"></use>
                </svg>
                <div class="name">arrowleft左箭头</div>
                <div class="code-name">#icon-arrowleftzuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-atsign"></use>
                </svg>
                <div class="name">atsign</div>
                <div class="code-name">#icon-atsign</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowupcircleshangyuanjiantou"></use>
                </svg>
                <div class="name">arrowupcircle上圆箭头</div>
                <div class="code-name">#icon-arrowupcircleshangyuanjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-barchartdaohanga"></use>
                </svg>
                <div class="name">barchart导航a</div>
                <div class="code-name">#icon-barchartdaohanga</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-barchartdaohangb"></use>
                </svg>
                <div class="name">barchart导航b</div>
                <div class="code-name">#icon-barchartdaohangb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowleftcirclezuoyuanjiantou"></use>
                </svg>
                <div class="name">arrowleftcircle左圆箭头</div>
                <div class="code-name">#icon-arrowleftcirclezuoyuanjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-batterydianchi"></use>
                </svg>
                <div class="name">battery电池</div>
                <div class="code-name">#icon-batterydianchi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-batterychargingchongdian"></use>
                </svg>
                <div class="name">batterycharging充电</div>
                <div class="code-name">#icon-batterychargingchongdian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-belloffbaojingguanbi"></use>
                </svg>
                <div class="name">belloff报警关闭</div>
                <div class="code-name">#icon-belloffbaojingguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bookshu"></use>
                </svg>
                <div class="name">book书</div>
                <div class="code-name">#icon-bookshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-belljingbao"></use>
                </svg>
                <div class="name">bell警报</div>
                <div class="code-name">#icon-belljingbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-awardjiangzhang"></use>
                </svg>
                <div class="name">award奖章</div>
                <div class="code-name">#icon-awardjiangzhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bluetoothlanya"></use>
                </svg>
                <div class="name">bluetooth蓝牙</div>
                <div class="code-name">#icon-bluetoothlanya</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-boxhezi"></use>
                </svg>
                <div class="name">box盒子</div>
                <div class="code-name">#icon-boxhezi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bookopenshu"></use>
                </svg>
                <div class="name">bookopen书</div>
                <div class="code-name">#icon-bookopenshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bookmarkshuqian"></use>
                </svg>
                <div class="name">bookmark书签</div>
                <div class="code-name">#icon-bookmarkshuqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-casttoushe"></use>
                </svg>
                <div class="name">cast投射</div>
                <div class="code-name">#icon-casttoushe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cameraxiangji"></use>
                </svg>
                <div class="name">camera相机</div>
                <div class="code-name">#icon-cameraxiangji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendarrili"></use>
                </svg>
                <div class="name">calendar日历</div>
                <div class="code-name">#icon-calendarrili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cameraoffxiangjiguanbi"></use>
                </svg>
                <div class="name">cameraoff相机关闭</div>
                <div class="code-name">#icon-cameraoffxiangjiguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chevronleftzuojiantou"></use>
                </svg>
                <div class="name">chevronleft左箭头</div>
                <div class="code-name">#icon-chevronleftzuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chevrondownxiajiantou"></use>
                </svg>
                <div class="name">chevrondown下箭头</div>
                <div class="code-name">#icon-chevrondownxiajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checkcircleyuangou"></use>
                </svg>
                <div class="name">checkcircle圆勾</div>
                <div class="code-name">#icon-checkcircleyuangou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chevronrightyoujiantou"></use>
                </svg>
                <div class="name">chevronright右箭头</div>
                <div class="code-name">#icon-chevronrightyoujiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chevronsdownshuangxiajiantou"></use>
                </svg>
                <div class="name">chevronsdown双下箭头</div>
                <div class="code-name">#icon-chevronsdownshuangxiajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checksquarefanggou"></use>
                </svg>
                <div class="name">checksquare方勾</div>
                <div class="code-name">#icon-checksquarefanggou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-briefcasegongwenbao"></use>
                </svg>
                <div class="name">briefcase公文包</div>
                <div class="code-name">#icon-briefcasegongwenbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clipboardxieziban"></use>
                </svg>
                <div class="name">clipboard写字板</div>
                <div class="code-name">#icon-clipboardxieziban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chromeyoulanqi"></use>
                </svg>
                <div class="name">chrome游览器</div>
                <div class="code-name">#icon-chromeyoulanqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chevronupshangjiantou"></use>
                </svg>
                <div class="name">chevronup上箭头</div>
                <div class="code-name">#icon-chevronupshangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chevronsrightshuangyoujiantou"></use>
                </svg>
                <div class="name">chevronsright双右箭头</div>
                <div class="code-name">#icon-chevronsrightshuangyoujiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chevronsupshuangshangjiantou"></use>
                </svg>
                <div class="name">chevronsup双上箭头</div>
                <div class="code-name">#icon-chevronsupshuangshangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudlightningshandian"></use>
                </svg>
                <div class="name">cloudlightning闪电</div>
                <div class="code-name">#icon-cloudlightningshandian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clockshizhong"></use>
                </svg>
                <div class="name">clock时钟</div>
                <div class="code-name">#icon-clockshizhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudyun"></use>
                </svg>
                <div class="name">cloud云</div>
                <div class="code-name">#icon-cloudyun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudraindayu"></use>
                </svg>
                <div class="name">cloudrain大雨</div>
                <div class="code-name">#icon-cloudraindayu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clouddrizzlexiaoyu"></use>
                </svg>
                <div class="name">clouddrizzle小雨</div>
                <div class="code-name">#icon-clouddrizzlexiaoyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-codebianma"></use>
                </svg>
                <div class="name">code编码</div>
                <div class="code-name">#icon-codebianma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chevronsleftshuangzuojiantou"></use>
                </svg>
                <div class="name">chevronsleft双左箭头</div>
                <div class="code-name">#icon-chevronsleftshuangzuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudsnowxiaoxue"></use>
                </svg>
                <div class="name">cloudsnow小雪</div>
                <div class="code-name">#icon-cloudsnowxiaoxue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudofftianqiguanbi"></use>
                </svg>
                <div class="name">cloudoff天气关闭</div>
                <div class="code-name">#icon-cloudofftianqiguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-codepen"></use>
                </svg>
                <div class="name">codepen</div>
                <div class="code-name">#icon-codepen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mappinditu2"></use>
                </svg>
                <div class="name">mappin地图2</div>
                <div class="code-name">#icon-mappinditu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gitpullrequestxuqiu"></use>
                </svg>
                <div class="name">gitpullrequest需求</div>
                <div class="code-name">#icon-gitpullrequestxuqiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eyeyanjing"></use>
                </svg>
                <div class="name">eye眼睛</div>
                <div class="code-name">#icon-eyeyanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-morehorizontalgengduo"></use>
                </svg>
                <div class="name">morehorizontal更多</div>
                <div class="code-name">#icon-morehorizontalgengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-headphoneserji"></use>
                </svg>
                <div class="name">headphones耳机</div>
                <div class="code-name">#icon-headphoneserji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lifebuoyjiushengquan"></use>
                </svg>
                <div class="name">lifebuoy救生圈</div>
                <div class="code-name">#icon-lifebuoyjiushengquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dropletshuidi"></use>
                </svg>
                <div class="name">droplet水滴</div>
                <div class="code-name">#icon-dropletshuidi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-linklianjie"></use>
                </svg>
                <div class="name">link链接</div>
                <div class="code-name">#icon-linklianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-downloadxiazai"></use>
                </svg>
                <div class="name">download下载</div>
                <div class="code-name">#icon-downloadxiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filterguolv"></use>
                </svg>
                <div class="name">filter过滤</div>
                <div class="code-name">#icon-filterguolv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layoutbuju"></use>
                </svg>
                <div class="name">layout布局</div>
                <div class="code-name">#icon-layoutbuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dollarsignqian"></use>
                </svg>
                <div class="name">dollarsign钱</div>
                <div class="code-name">#icon-dollarsignqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cornerleftupjiantou"></use>
                </svg>
                <div class="name">cornerleftup箭头</div>
                <div class="code-name">#icon-cornerleftupjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gitcommitfenzhi2"></use>
                </svg>
                <div class="name">gitcommit分之2</div>
                <div class="code-name">#icon-gitcommitfenzhi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compasszhinanzhen"></use>
                </svg>
                <div class="name">compass指南针</div>
                <div class="code-name">#icon-compasszhinanzhen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gitbranchfenzhi"></use>
                </svg>
                <div class="name">gitbranch分支</div>
                <div class="code-name">#icon-gitbranchfenzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-micoffhuatongguan"></use>
                </svg>
                <div class="name">micoff话筒关</div>
                <div class="code-name">#icon-micoffhuatongguan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-codesandbox"></use>
                </svg>
                <div class="name">codesandbox</div>
                <div class="code-name">#icon-codesandbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-messagecirclexiaoxi1"></use>
                </svg>
                <div class="name">messagecircle消息1</div>
                <div class="code-name">#icon-messagecirclexiaoxi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editbianji"></use>
                </svg>
                <div class="name">edit编辑</div>
                <div class="code-name">#icon-editbianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copyfuzhi"></use>
                </svg>
                <div class="name">copy复制</div>
                <div class="code-name">#icon-copyfuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cornerrightupjiantou"></use>
                </svg>
                <div class="name">cornerrightup箭头</div>
                <div class="code-name">#icon-cornerrightupjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-coffeekafei"></use>
                </svg>
                <div class="name">coffee咖啡</div>
                <div class="code-name">#icon-coffeekafei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gitmergehebingronghe"></use>
                </svg>
                <div class="name">gitmerge合并融合</div>
                <div class="code-name">#icon-gitmergehebingronghe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cornerupleftjiantou"></use>
                </svg>
                <div class="name">cornerupleft箭头</div>
                <div class="code-name">#icon-cornerupleftjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moreverticalgengduo"></use>
                </svg>
                <div class="name">morevertical更多</div>
                <div class="code-name">#icon-moreverticalgengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logoutzhuxiao"></use>
                </svg>
                <div class="name">logout注销</div>
                <div class="code-name">#icon-logoutzhuxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-homezhuye"></use>
                </svg>
                <div class="name">home主页</div>
                <div class="code-name">#icon-homezhuye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-commandzhiling"></use>
                </svg>
                <div class="name">command指令</div>
                <div class="code-name">#icon-commandzhiling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phonedianhua"></use>
                </svg>
                <div class="name">phone电话</div>
                <div class="code-name">#icon-phonedianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-percentbaifenbi"></use>
                </svg>
                <div class="name">percent百分比</div>
                <div class="code-name">#icon-percentbaifenbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-harddriveyingpan"></use>
                </svg>
                <div class="name">harddrive硬盘</div>
                <div class="code-name">#icon-harddriveyingpan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moveyidong"></use>
                </svg>
                <div class="name">move移动</div>
                <div class="code-name">#icon-moveyidong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dribbblezhuibolanqiu"></use>
                </svg>
                <div class="name">dribbble追波篮球</div>
                <div class="code-name">#icon-dribbblezhuibolanqiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-monitorxianshiqi"></use>
                </svg>
                <div class="name">monitor显示器</div>
                <div class="code-name">#icon-monitorxianshiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-corneruprightjiantou"></use>
                </svg>
                <div class="name">cornerupright箭头</div>
                <div class="code-name">#icon-corneruprightjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-musicyinle"></use>
                </svg>
                <div class="name">music音乐</div>
                <div class="code-name">#icon-musicyinle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-locksuo"></use>
                </svg>
                <div class="name">lock锁</div>
                <div class="code-name">#icon-locksuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-deleteshanchu"></use>
                </svg>
                <div class="name">delete删除</div>
                <div class="code-name">#icon-deleteshanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minimizechuangkouhua"></use>
                </svg>
                <div class="name">minimize窗口化</div>
                <div class="code-name">#icon-minimizechuangkouhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hashjinghao"></use>
                </svg>
                <div class="name">hash井号</div>
                <div class="code-name">#icon-hashjinghao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folderpluszhankaiwenjianjia"></use>
                </svg>
                <div class="name">folderplus展开文件夹</div>
                <div class="code-name">#icon-folderpluszhankaiwenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dividecirclechu"></use>
                </svg>
                <div class="name">dividecircle除</div>
                <div class="code-name">#icon-dividecirclechu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-columnszhuanlan"></use>
                </svg>
                <div class="name">columns专栏</div>
                <div class="code-name">#icon-columnszhuanlan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filekongwenben"></use>
                </svg>
                <div class="name">file空文本</div>
                <div class="code-name">#icon-filekongwenben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cornerdownrightjiantou"></use>
                </svg>
                <div class="name">cornerdownright箭头</div>
                <div class="code-name">#icon-cornerdownrightjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dividechu"></use>
                </svg>
                <div class="name">divide除</div>
                <div class="code-name">#icon-dividechu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heartxin"></use>
                </svg>
                <div class="name">heart心</div>
                <div class="code-name">#icon-heartxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cornerleftdownjiantou"></use>
                </svg>
                <div class="name">cornerleftdown箭头</div>
                <div class="code-name">#icon-cornerleftdownjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folderminusshouqiwenjianjia"></use>
                </svg>
                <div class="name">folderminus收起文件夹</div>
                <div class="code-name">#icon-folderminusshouqiwenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filetextwenben"></use>
                </svg>
                <div class="name">filetext文本</div>
                <div class="code-name">#icon-filetextwenben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folderwenjianjia"></use>
                </svg>
                <div class="name">folder文件夹</div>
                <div class="code-name">#icon-folderwenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-playcirclebofang"></use>
                </svg>
                <div class="name">playcircle播放</div>
                <div class="code-name">#icon-playcirclebofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit2bianji2"></use>
                </svg>
                <div class="name">edit2编辑2</div>
                <div class="code-name">#icon-edit2bianji2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-globediqiu"></use>
                </svg>
                <div class="name">globe地球</div>
                <div class="code-name">#icon-globediqiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mapditu"></use>
                </svg>
                <div class="name">map地图</div>
                <div class="code-name">#icon-mapditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-listliebiao"></use>
                </svg>
                <div class="name">list列表</div>
                <div class="code-name">#icon-listliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-facebook"></use>
                </svg>
                <div class="name">facebook</div>
                <div class="code-name">#icon-facebook</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-giftliwu"></use>
                </svg>
                <div class="name">gift礼物</div>
                <div class="code-name">#icon-giftliwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-messagesquarexiaoxi2"></use>
                </svg>
                <div class="name">messagesquare消息2</div>
                <div class="code-name">#icon-messagesquarexiaoxi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-powerdianyuanguanbi"></use>
                </svg>
                <div class="name">power电源关闭</div>
                <div class="code-name">#icon-powerdianyuanguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plussquarefangjiahao"></use>
                </svg>
                <div class="name">plussquare方加号</div>
                <div class="code-name">#icon-plussquarefangjiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mailyoujian"></use>
                </svg>
                <div class="name">mail邮件</div>
                <div class="code-name">#icon-mailyoujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pausecirclezanting"></use>
                </svg>
                <div class="name">pausecircle暂停</div>
                <div class="code-name">#icon-pausecirclezanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pocketkoudai"></use>
                </svg>
                <div class="name">pocket口袋</div>
                <div class="code-name">#icon-pocketkoudai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-playbofang"></use>
                </svg>
                <div class="name">play播放</div>
                <div class="code-name">#icon-playbofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phoneoutgoingboda"></use>
                </svg>
                <div class="name">phoneoutgoing拨打</div>
                <div class="code-name">#icon-phoneoutgoingboda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cropcaiqie"></use>
                </svg>
                <div class="name">crop裁切</div>
                <div class="code-name">#icon-cropcaiqie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phoneforwardedboda"></use>
                </svg>
                <div class="name">phoneforwarded拨打</div>
                <div class="code-name">#icon-phoneforwardedboda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fastforwardkuaijin"></use>
                </svg>
                <div class="name">fastforward快进</div>
                <div class="code-name">#icon-fastforwardkuaijin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-michuatong"></use>
                </svg>
                <div class="name">mic话筒</div>
                <div class="code-name">#icon-michuatong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-helpcirclebangzhu"></use>
                </svg>
                <div class="name">helpcircle帮助</div>
                <div class="code-name">#icon-helpcirclebangzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cornerrightdownjiantou"></use>
                </svg>
                <div class="name">cornerrightdown箭头</div>
                <div class="code-name">#icon-cornerrightdownjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fileplusjiawenjian"></use>
                </svg>
                <div class="name">fileplus加文件</div>
                <div class="code-name">#icon-fileplusjiawenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pausezanting"></use>
                </svg>
                <div class="name">pause暂停</div>
                <div class="code-name">#icon-pausezanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link2lianjie2"></use>
                </svg>
                <div class="name">link2链接2</div>
                <div class="code-name">#icon-link2lianjie2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-maximizezuidahua"></use>
                </svg>
                <div class="name">maximize最大化</div>
                <div class="code-name">#icon-maximizezuidahua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moonyueliang"></use>
                </svg>
                <div class="name">moon月亮</div>
                <div class="code-name">#icon-moonyueliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-packagebaoguo"></use>
                </svg>
                <div class="name">package包裹</div>
                <div class="code-name">#icon-packagebaoguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minussquarejian"></use>
                </svg>
                <div class="name">minussquare减</div>
                <div class="code-name">#icon-minussquarejian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-instagramxiangji"></use>
                </svg>
                <div class="name">instagram相机</div>
                <div class="code-name">#icon-instagramxiangji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logindenglu"></use>
                </svg>
                <div class="name">login登陆</div>
                <div class="code-name">#icon-logindenglu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-papercliphuixingzhen"></use>
                </svg>
                <div class="name">paperclip回形针</div>
                <div class="code-name">#icon-papercliphuixingzhen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minuscirclejian"></use>
                </svg>
                <div class="name">minuscircle减</div>
                <div class="code-name">#icon-minuscirclejian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nav_cdaohangc"></use>
                </svg>
                <div class="name">nav_c导航c</div>
                <div class="code-name">#icon-nav_cdaohangc</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phoneincomingjieting"></use>
                </svg>
                <div class="name">phoneincoming接听</div>
                <div class="code-name">#icon-phoneincomingjieting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phonecalldianhuaboda"></use>
                </svg>
                <div class="name">phonecall电话拨打</div>
                <div class="code-name">#icon-phonecalldianhuaboda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-printerdayinji"></use>
                </svg>
                <div class="name">printer打印机</div>
                <div class="code-name">#icon-printerdayinji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-radioguangbo"></use>
                </svg>
                <div class="name">radio广播</div>
                <div class="code-name">#icon-radioguangbo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-creditcardxinyongka"></use>
                </svg>
                <div class="name">creditcard信用卡</div>
                <div class="code-name">#icon-creditcardxinyongka</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit3bianji3"></use>
                </svg>
                <div class="name">edit3编辑3</div>
                <div class="code-name">#icon-edit3bianji3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pluscircleyuanjiahao"></use>
                </svg>
                <div class="name">pluscircle圆加号</div>
                <div class="code-name">#icon-pluscircleyuanjiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-inboxshoujianxiang"></use>
                </svg>
                <div class="name">inbox收件箱</div>
                <div class="code-name">#icon-inboxshoujianxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nav_bdaohangb"></use>
                </svg>
                <div class="name">nav_b导航b</div>
                <div class="code-name">#icon-nav_bdaohangb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-crosshairmiaozhun"></use>
                </svg>
                <div class="name">crosshair瞄准</div>
                <div class="code-name">#icon-crosshairmiaozhun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-databaseshujuku"></use>
                </svg>
                <div class="name">database数据库</div>
                <div class="code-name">#icon-databaseshujuku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menucaidan"></use>
                </svg>
                <div class="name">menu菜单</div>
                <div class="code-name">#icon-menucaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pentoolgangbigongju"></use>
                </svg>
                <div class="name">pentool钢笔工具</div>
                <div class="code-name">#icon-pentoolgangbigongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-downloadcloudyunxiazai"></use>
                </svg>
                <div class="name">downloadcloud云下载</div>
                <div class="code-name">#icon-downloadcloudyunxiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loaderjiazai"></use>
                </svg>
                <div class="name">loader加载</div>
                <div class="code-name">#icon-loaderjiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-keyyuechi"></use>
                </svg>
                <div class="name">key钥匙</div>
                <div class="code-name">#icon-keyyuechi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nav_adaohanga"></use>
                </svg>
                <div class="name">nav_a导航a</div>
                <div class="code-name">#icon-nav_adaohanga</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filmyingpian"></use>
                </svg>
                <div class="name">film影片</div>
                <div class="code-name">#icon-filmyingpian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cornerdownleftjiantou"></use>
                </svg>
                <div class="name">cornerdownleft箭头</div>
                <div class="code-name">#icon-cornerdownleftjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rewinddaohui"></use>
                </svg>
                <div class="name">rewind倒回</div>
                <div class="code-name">#icon-rewinddaohui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scissorsjiandao"></use>
                </svg>
                <div class="name">scissors剪刀</div>
                <div class="code-name">#icon-scissorsjiandao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-savebaocun"></use>
                </svg>
                <div class="name">save保存</div>
                <div class="code-name">#icon-savebaocun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-navigationdaohang"></use>
                </svg>
                <div class="name">navigation导航</div>
                <div class="code-name">#icon-navigationdaohang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-searchsousuo"></use>
                </svg>
                <div class="name">search搜索</div>
                <div class="code-name">#icon-searchsousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plusjiahao"></use>
                </svg>
                <div class="name">plus加号</div>
                <div class="code-name">#icon-plusjiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-infoxinxi"></use>
                </svg>
                <div class="name">info信息</div>
                <div class="code-name">#icon-infoxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-navigation2daohang"></use>
                </svg>
                <div class="name">navigation2导航</div>
                <div class="code-name">#icon-navigation2daohang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-imagetupian"></use>
                </svg>
                <div class="name">image图片</div>
                <div class="code-name">#icon-imagetupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-discchangpian"></use>
                </svg>
                <div class="name">disc唱片</div>
                <div class="code-name">#icon-discchangpian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phoneoffdianhuaguanbi"></use>
                </svg>
                <div class="name">phoneoff电话关闭</div>
                <div class="code-name">#icon-phoneoffdianhuaguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phonemissedweijietong"></use>
                </svg>
                <div class="name">phonemissed未接通</div>
                <div class="code-name">#icon-phonemissedweijietong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refreshshuaxin2"></use>
                </svg>
                <div class="name">refresh刷新2</div>
                <div class="code-name">#icon-refreshshuaxin2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mousepointershubiao"></use>
                </svg>
                <div class="name">mousepointer鼠标</div>
                <div class="code-name">#icon-mousepointershubiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rotatexuanzhuan2"></use>
                </svg>
                <div class="name">rotate旋转2</div>
                <div class="code-name">#icon-rotatexuanzhuan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rssdingyue"></use>
                </svg>
                <div class="name">rss订阅</div>
                <div class="code-name">#icon-rssdingyue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-serverfuwuqi"></use>
                </svg>
                <div class="name">server服务器</div>
                <div class="code-name">#icon-serverfuwuqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sendfasong"></use>
                </svg>
                <div class="name">send发送</div>
                <div class="code-name">#icon-sendfasong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settingsshezhi"></use>
                </svg>
                <div class="name">settings设置</div>
                <div class="code-name">#icon-settingsshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refreshshuaxin"></use>
                </svg>
                <div class="name">refresh刷新</div>
                <div class="code-name">#icon-refreshshuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-featheryumao"></use>
                </svg>
                <div class="name">feather羽毛</div>
                <div class="code-name">#icon-featheryumao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoppingcartgouwuche"></use>
                </svg>
                <div class="name">shoppingcart购物车</div>
                <div class="code-name">#icon-shoppingcartgouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoppingbaggouwudai"></use>
                </svg>
                <div class="name">shoppingbag购物袋</div>
                <div class="code-name">#icon-shoppingbaggouwudai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shieldoffdunpaiguanbi"></use>
                </svg>
                <div class="name">shieldoff盾牌关闭</div>
                <div class="code-name">#icon-shieldoffdunpaiguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flagqi"></use>
                </svg>
                <div class="name">flag旗</div>
                <div class="code-name">#icon-flagqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sharefenxiang2"></use>
                </svg>
                <div class="name">share分享2</div>
                <div class="code-name">#icon-sharefenxiang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fileminusjianwenjian"></use>
                </svg>
                <div class="name">fileminus减文件</div>
                <div class="code-name">#icon-fileminusjianwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shufflenuodong"></use>
                </svg>
                <div class="name">shuffle挪动</div>
                <div class="code-name">#icon-shufflenuodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-skipbackkuaitui"></use>
                </svg>
                <div class="name">skipback快退</div>
                <div class="code-name">#icon-skipbackkuaitui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sidebarcebianlan"></use>
                </svg>
                <div class="name">sidebar侧边栏</div>
                <div class="code-name">#icon-sidebarcebianlan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-maximizequanping"></use>
                </svg>
                <div class="name">maximize全屏</div>
                <div class="code-name">#icon-maximizequanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-slidershuaniu"></use>
                </svg>
                <div class="name">sliders滑钮</div>
                <div class="code-name">#icon-slidershuaniu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-slashjinzhi"></use>
                </svg>
                <div class="name">slash禁止</div>
                <div class="code-name">#icon-slashjinzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eyeoffyanjingguanbi"></use>
                </svg>
                <div class="name">eyeoff眼睛关闭</div>
                <div class="code-name">#icon-eyeoffyanjingguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-skipforwardkuaijin"></use>
                </svg>
                <div class="name">skipforward快进</div>
                <div class="code-name">#icon-skipforwardkuaijin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-externallinkfenxiang"></use>
                </svg>
                <div class="name">externallink分享</div>
                <div class="code-name">#icon-externallinkfenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-slacksongxie"></use>
                </svg>
                <div class="name">slack松懈</div>
                <div class="code-name">#icon-slacksongxie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartphoneshouji"></use>
                </svg>
                <div class="name">smartphone手机</div>
                <div class="code-name">#icon-smartphoneshouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minimizechuangkouhua2"></use>
                </svg>
                <div class="name">minimize窗口化2</div>
                <div class="code-name">#icon-minimizechuangkouhua2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cpuchuliqi"></use>
                </svg>
                <div class="name">cpu处理器</div>
                <div class="code-name">#icon-cpuchuliqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stopcircletingzhi"></use>
                </svg>
                <div class="name">stopcircle停止</div>
                <div class="code-name">#icon-stopcircletingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sofachairshafa"></use>
                </svg>
                <div class="name">sofachair沙发</div>
                <div class="code-name">#icon-sofachairshafa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-speakeryangshengqi"></use>
                </svg>
                <div class="name">speaker扬声器</div>
                <div class="code-name">#icon-speakeryangshengqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-starxingxing"></use>
                </svg>
                <div class="name">star星星</div>
                <div class="code-name">#icon-starxingxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suntaiyang"></use>
                </svg>
                <div class="name">sun太阳</div>
                <div class="code-name">#icon-suntaiyang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sunriserichu"></use>
                </svg>
                <div class="name">sunrise日出</div>
                <div class="code-name">#icon-sunriserichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tabletpingban"></use>
                </svg>
                <div class="name">tablet平板</div>
                <div class="code-name">#icon-tabletpingban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tagbiaoqian"></use>
                </svg>
                <div class="name">tag标签</div>
                <div class="code-name">#icon-tagbiaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layerscengji"></use>
                </svg>
                <div class="name">layers层级</div>
                <div class="code-name">#icon-layerscengji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gridfangge"></use>
                </svg>
                <div class="name">grid方格</div>
                <div class="code-name">#icon-gridfangge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sunsetrila"></use>
                </svg>
                <div class="name">sunset日落</div>
                <div class="code-name">#icon-sunsetrila</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumbsupdianzan"></use>
                </svg>
                <div class="name">thumbsup点赞</div>
                <div class="code-name">#icon-thumbsupdianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thermometerwenduji"></use>
                </svg>
                <div class="name">thermometer温度计</div>
                <div class="code-name">#icon-thermometerwenduji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-terminalzhongduan"></use>
                </svg>
                <div class="name">terminal终端</div>
                <div class="code-name">#icon-terminalzhongduan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-piechartbingtu"></use>
                </svg>
                <div class="name">piechart饼图</div>
                <div class="code-name">#icon-piechartbingtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-toolgongju"></use>
                </svg>
                <div class="name">tool工具</div>
                <div class="code-name">#icon-toolgongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-repeatzhongfu"></use>
                </svg>
                <div class="name">repeat重复</div>
                <div class="code-name">#icon-repeatzhongfu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rotatexuanzhuan"></use>
                </svg>
                <div class="name">rotate旋转</div>
                <div class="code-name">#icon-rotatexuanzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-trashlaji2"></use>
                </svg>
                <div class="name">trash垃圾2</div>
                <div class="code-name">#icon-trashlaji2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shielddunpai"></use>
                </svg>
                <div class="name">shield盾牌</div>
                <div class="code-name">#icon-shielddunpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-targetbazi"></use>
                </svg>
                <div class="name">target靶子</div>
                <div class="code-name">#icon-targetbazi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sharefenxiang"></use>
                </svg>
                <div class="name">share分享</div>
                <div class="code-name">#icon-sharefenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-userplustianjiayonghu"></use>
                </svg>
                <div class="name">userplus添加用户</div>
                <div class="code-name">#icon-userplustianjiayonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlockjiesuo"></use>
                </svg>
                <div class="name">unlock解锁</div>
                <div class="code-name">#icon-unlockjiesuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-trashlaji"></use>
                </svg>
                <div class="name">trash垃圾</div>
                <div class="code-name">#icon-trashlaji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-uploadcloudshangchuanyun"></use>
                </svg>
                <div class="name">uploadcloud上传云</div>
                <div class="code-name">#icon-uploadcloudshangchuanyun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-truckkache"></use>
                </svg>
                <div class="name">truck卡车</div>
                <div class="code-name">#icon-truckkache</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tvdianshi"></use>
                </svg>
                <div class="name">tv电视</div>
                <div class="code-name">#icon-tvdianshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumbsdowntucao"></use>
                </svg>
                <div class="name">thumbsdown吐槽</div>
                <div class="code-name">#icon-thumbsdowntucao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-umbrellasan"></use>
                </svg>
                <div class="name">umbrella伞</div>
                <div class="code-name">#icon-umbrellasan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xcirclecha"></use>
                </svg>
                <div class="name">xcircle叉</div>
                <div class="code-name">#icon-xcirclecha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xoctagoncha"></use>
                </svg>
                <div class="name">xoctagon叉</div>
                <div class="code-name">#icon-xoctagoncha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-uploadshangchuan"></use>
                </svg>
                <div class="name">upload上传</div>
                <div class="code-name">#icon-uploadshangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xcha"></use>
                </svg>
                <div class="name">x叉</div>
                <div class="code-name">#icon-xcha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-usersduoyonghu"></use>
                </svg>
                <div class="name">users多用户</div>
                <div class="code-name">#icon-usersduoyonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-userminusshanchuyonghu"></use>
                </svg>
                <div class="name">userminus删除用户</div>
                <div class="code-name">#icon-userminusshanchuyonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-userxyonghujiancha"></use>
                </svg>
                <div class="name">userx用户检查</div>
                <div class="code-name">#icon-userxyonghujiancha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-videoshipin"></use>
                </svg>
                <div class="name">video视频</div>
                <div class="code-name">#icon-videoshipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-useryonghu"></use>
                </svg>
                <div class="name">user用户</div>
                <div class="code-name">#icon-useryonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-watchshoubiao"></use>
                </svg>
                <div class="name">watch手表</div>
                <div class="code-name">#icon-watchshoubiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoomoutsuoxiao"></use>
                </svg>
                <div class="name">zoomout缩小</div>
                <div class="code-name">#icon-zoomoutsuoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-trendingdownqushi2"></use>
                </svg>
                <div class="name">trendingdown趋势2</div>
                <div class="code-name">#icon-trendingdownqushi2</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
